
<div class="uiview-content">
    <div class="row">
        <div class="col col-md-1">
            <ul class="sidebar">
                <li class="sidebar-item"
                    ng-class="{true:'sidebar-item-active'}[item.active]"
                    ng-bind="item.label" 
                    ng-repeat="item in sidebarList track by $index"
                    ng-click="activate($index)">
                </li>
            </ul>
        </div>
        <div class="col col-md-11" ng-if="activeSidebarItem === 2">
             <!-- 控制栏 -->
             <div class="toolbar">
                <form class="form-inline" novalidate>
                  <div class="form-group">
                    <label for="exampleInputEmail1">Git repository</label>
                    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="repository url" ng-model="params.repo">
                  </div>
                  <div class="form-group">
                    <label for="exampleInputPassword1">Branch</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Branch" ng-model="params.branch">
                  </div>
                  <div class="form-group">
                    <label for="selectHero">SelectHero</label>
                    <select class="form-control" ng-options="opt as opt for opt in filterNames" ng-model="params.selectHero"></select>
                  </div>
                  <div class="checkbox">
                    <label>
                      <input type="checkbox"> 忽略检查
                    </label>
                  </div>
                </form>
                <button type="button" class="btn btn-danger" ng-click="rebuild()">汇总项目</button>
                <button type="button" class="btn btn-primary" ng-click="handleDOM()">DOM操作</button>
                <button type="button" class="btn btn-success" ng-click="search()">查询</button>
             </div>
             <!-- 表格区 -->
             <div class="table-zone" id="tablestage">
                 <table id="table1" class="table table-primary">
                     <thead>
                         <tr>
                             <th ng-repeat="head in headers" ng-bind="head"></th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr ng-repeat="item in tableData track by $index">
                             <td ng-bind="item.name"></td>
                             <td ng-bind="item.age"></td>
                             <td ng-bind="item.hero"></td>
                             <td ng-bind="item.power"></td>
                         </tr>
                     </tbody>
                 </table>
             </div>
             <!-- 计算信息 -->
             <div class="calc-info">
                 过滤且排序后的名称包含:
                 <span class="label label-success" ng-repeat="heroname in filterNames" ng-bind="heroname">
                 </span>
             </div>
        </div>
        <div class="col col-md-11" ng-if="activeSidebarItem === 0">Content of Choice O</div>
        <div class="col col-md-11" ng-if="activeSidebarItem === 1">Content of Choice I</div>
        <div class="col col-md-11" ng-if="activeSidebarItem === 3">Content of Choice III</div>
        <div class="col col-md-11" ng-if="activeSidebarItem === 4">Content of Choice IV</div>
        <div class="col col-md-11" ng-if="activeSidebarItem === 5">Content of Choice V</div>
        <div class="col col-md-11" ng-if="activeSidebarItem === 6">Content of Choice VI</div>
    </div>
</div>

<style>
   .sidebar{
      list-style: none;
      background-color: #1abc9c;
      text-align:center;
      padding-left:0;
      margin-top:20px;
   }
   .sidebar-item{
      padding:10px 20px;
      border-bottom:2px solid white;
      cursor:pointer;
   }
   .sidebar-item-active{
      background-color: white;
      font-weight:600;
      border:2px solid #1abc9c;
   }
   .toolbar{
    margin-top:20px;
   }
   .label{
    margin-left:5px;
   }
   #table1{
    transition:all .3s cubic-bezier(.64,1.95,.81,.53);
   }
</style>